import { useContext } from "react";
import GanttContext from "../../../context";
import TimeHeader from "./../time-header";
import VirtualList from "../../../components/virtual-list";
import GanttTableItem from "./gantt-table-item";
import { GanttConsts } from "@/components/gantt/constants";

export default function GanttTable() {
    const { flattenedTasks, taskMode, scrollLeft, tasksStart, tasksEnd } = useContext(GanttContext);

    return (
        <div className="flex flex-col h-full relative">
            {/* 时间轴标题 */}
            <div
                className="flex shadow-lg bg-gray-50 z-20 w-full"
                style={{
                    height: `${GanttConsts.HEAD_HEIGHT}px`,
                    transform: `translateX(-${scrollLeft}px)`
                }}
            >
                <TimeHeader tasksEnd={tasksEnd} tasksStart={tasksStart} taskMode={taskMode} />
            </div>

            {/* 甘特图内容 */}
            <div className="flex-1 relative">
                <div
                    style={{
                        transform: `translateX(-${scrollLeft}px)`,
                        zIndex: 1
                    }}
                >
                    <VirtualList
                        items={flattenedTasks}
                        Comp={GanttTableItem}
                    />
                </div>
            </div>
        </div>
    );
}
